<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04_component_props</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">

    /*
  需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明
    1). 如果性别没有指定, 默认为男
    2). 如果年龄没有指定, 默认为18
    */

    // 1. 定义组件
    function Person(props) {

        return (
            <ul>
                <li>姓名：{props.name}</li>
                <li>年龄：{props.age}</li>
                <li>性别：{props.sex}</li>
            </ul>
        )
    }

    // 指定属性默认值
    Person.defaultProps = {
        sex: "男",
        age: 18
    };
    // 指定属性的类型和必要性
    Person.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number
    }

    // 2. 渲染组件标签
    const p1 = {
        name: "Tom",
        age: 43,
        sex: '女'
    }
    /*
        ... 的作用
        1. 打包
            function fn(... as){}  fn(1,2,3)
        2. 解包
            const arr1 = [1,2,3] const arr2 = [6,...arr1,9]
     */
    // ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>, document.getElementById("example1"));
    ReactDOM.render(<Person {...p1}/>, document.getElementById("example1"));

    const p2 = {
        name: "Jac",
    }
    ReactDOM.render(<Person name={p2.name} age={10}/>, document.getElementById("example2"));

    // 使用组件类的方式
    class Person2 extends React.Component {
        render() {
            console.log(this);
            return (
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>年龄：{this.props.age}</li>
                    <li>性别：{this.props.sex}</li>
                </ul>
            )
        }
    }
    // 渲染组件标签
    ReactDOM.render(<Person2 {...p1}/>, document.getElementById("example3"));
</script>
</body>
</html>

